Android switch style 讓switch像是iOS原生的switch


Posted by Limon on 2023-12-12

使用SwitchMaterial需要先新增

implementation 'com.google.android.material:material:1.9.0'

先看一下SwitchMaterial元件屬性

屬性 描述
android:text 文字
android:textOn 滑桿打開時顯示的文字
android:textOff 滑桿關閉時顯示的文字
android:thumb 滑桿圖片
app:track 軌跡圖片
app:switchMinWidth 滑桿開關的最小長度
app:switchPadding 滑桿開關與文字的間距
android:checked 是否選中
app:splitTrack 是否將滑桿與軌跡分開
app:showText 是否顯示textOn/textOff 文本
app:thumbTint 設定滑桿顏色
app:trackTint 設定軌跡顏色
app:thumbTintMode 用於套用滑動按鈕色調的混合模式

元件使用到的是android:thumb、app:thumbTint、app:track、app:trackTint

<com.google.android.material.switchmaterial.SwitchMaterial
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:thumb="@drawable/switch_thumb_selector"
                        app:thumbTint="@color/white"
                        app:track="@drawable/switch_track"
                        app:trackTint="@drawable/switch_track_color_selector" />

switch_thumb_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="false">
        <shape android:shape="oval">
            <solid android:color="@android:color/white" />
            <size android:width="20dp" android:height="20dp" />
            <stroke android:width="2dp" android:color="#0000ffff" />
        </shape>
    </item>
</selector>

switch_track.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_checked="true">
        <shape android:shape="rectangle">
            <size android:width="36dp" android:height="20dp"/>
            <solid android:width="1dp" android:color="@android:color/holo_orange_dark"/>
            <corners android:radius="50dp"/>
        </shape>
    </item>

    <item android:state_checked="false">
        <shape android:shape="rectangle">
            <size android:width="36dp" android:height="20dp"/>
            <solid android:width="1dp" android:color="@android:color/darker_gray"/>
            <corners android:radius="50dp"/>
        </shape>
    </item>

</selector>

switch_track_color_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_checked="true">
        <shape android:shape="rectangle">
            <size android:width="36dp" android:height="20dp"/>
            <solid android:width="1dp" android:color="@android:color/holo_orange_dark"/>
            <corners android:radius="50dp"/>
        </shape>
    </item>

    <item android:state_checked="false">
        <shape android:shape="rectangle">
            <size android:width="36dp" android:height="20dp"/>
            <solid android:width="1dp" android:color="@android:color/darker_gray"/>
            <corners android:radius="50dp"/>
        </shape>
    </item>

</selector>

調整多次後這是我覺得最像ios switch的版本了


#Android







Related Posts

第一次創建 Gin 網站就卡住

第一次創建 Gin 網站就卡住

簡明 Python Numpy 入門教學

簡明 Python Numpy 入門教學

ESM 模組 (ES6 Modules or JavaScript Modules)

ESM 模組 (ES6 Modules or JavaScript Modules)


Comments